// 封装端口跳转功能为函数
function handlePortRedirect() {
    // 创建端口跳转按钮
    const portButton = document.createElement('button');
    portButton.id = 'portRedirectButton';
    portButton.className = 'port-redirect-btn';
    portButton.innerHTML = `
        <span class="btn-text">跳转到端口4000</span>
        <span class="btn-icon">→</span>
    `;
    
    // 创建状态消息容器
    const statusMessage = document.createElement('div');
    statusMessage.id = 'portRedirectStatus';
    statusMessage.className = 'port-redirect-status hidden';
    
    // 将元素添加到页面
    document.body.appendChild(portButton);
    document.body.appendChild(statusMessage);
    
    // 添加点击事件（按钮本身的点击逻辑）
    portButton.addEventListener('click', function() {
        const statusElement = document.getElementById('portRedirectStatus');
        
        // 显示连接中状态
        showStatus(statusElement, '正在连接到端口4000...', 'info');
        
        // 尝试跳转到端口4000
        try {
            // 创建超时检测
            const timeoutPromise = new Promise((_, reject) => 
                setTimeout(() => reject(new Error('连接超时')), 3000)
            );
            
            // 尝试访问端口4000
            const fetchPromise = fetch('http://localhost:4000', { 
                method: 'HEAD',
                mode: 'no-cors'
            });
            
            // 等待结果
            Promise.race([fetchPromise, timeoutPromise])
                .then(() => {
                    // 如果能够访问，则跳转
                    showStatus(statusElement, '连接成功！正在跳转...', 'success');
                    setTimeout(() => {
                        window.location.href = 'http://localhost:4000';
                    }, 1000);
                })
                .catch(error => {
                    // 显示错误信息
                    showStatus(statusElement, '无法连接到端口4000，请确保服务正在运行。', 'error');
                    console.error('连接错误:', error);
                });
        } catch (error) {
            showStatus(statusElement, '发生错误: ' + error.message, 'error');
        }
    });
    
    // 显示状态消息的函数
    function showStatus(element, message, type) {
        element.textContent = message;
        element.className = 'port-redirect-status ' + type;
        element.classList.remove('hidden');
        
        // 5秒后隐藏消息
        setTimeout(() => {
            element.classList.add('hidden');
        }, 5000);
    }
}